<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="h-ui-font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/compound.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<style type="text/css">
			* {
				font-size: 12px;
				font-family: "微软雅黑";
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			a:hover {
				cursor: pointer;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div id="index-header">
			<div class="head">
			<!--定位导航-->
			<div id="head-top" class="w">
				<div id="head-top-content" class="h">
					<ul class="head-top-ul1 h">
						<li><i class="iconfont icon-hongjiuchengiconhongjiucheng icon-home"></i>当前城市：</li>
						<li class="head-display-par" id="head-display-a">
							<i class="iconfont icon-dangqianchengshi  icon-down"></i>
							<a href="javascript:;" class="head-a">北京</a>
							<div id="head-display">
								<p class="head-display-city">
									<a href="javascript:;">北京</a>
									<a href="javascript:;">上海</a>
									<a href="javascript:;">天津</a>
									<a href="javascript:;">重庆</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">山西</a>
									<a href="javascript:;">河北</a>
									<a href="javascript:;">河南</a>
									<a href="javascript:;">辽宁</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">吉林</a>
									<a href="javascript:;">陕西</a>
									<a href="javascript:;">深圳</a>
									<a href="javascript:;">江苏</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">山东</a>
									<a href="javascript:;">安徽</a>
									<a href="javascript:;">浙江</a>
									<a href="javascript:;">福建</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">湖北</a>
									<a href="javascript:;">湖南</a>
									<a href="javascript:;">广东</a>
									<a href="javascript:;">江西</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">海南</a>
									<a href="javascript:;">贵州</a>
									<a href="javascript:;">宁夏</a>

									<a href="javascript:;">黑龙江</a>

								</p>
							</div>
						</li>
						<li>你好，欢迎进入!</li>
						<li>
							<a class="head-a" href="login.html">登录</a>
						</li>
						<li>
							<a class="head-a" href="register.html">注册</a>
						</li>
					</ul>

					<ul class="head-top-ul2 h">
						<li class="head-position-par">
							<a class="head-a" href="javascript:;">我的账户</a><i class="iconfont icon-arrowDown icon-down"></i>
							<div class="head-myself">
								<p class="head-myself-children">
									<a href="order.html">我的订单</a>
								</p>
								<p class="head-myself-children">
									<a href="javascript:;">我的资料</a>
								</p>
								<p class="head-myself-children">
									<a href="javascript:;">我的收藏</a>
								</p>
								<p class="head-myself-children">
									<a href="shopping.html">我的购物车</a>
								</p>
								<p class="head-myself-children">
									<a href="javascript:;">我的关注</a>
								</p>
							</div>
						</li>
						<li><i class="iconfont icon-tubiaoshangcheng icon-down"></i>
							<a class="head-a" href="shopping.html">购物车<span class="head-number">1</span>件</a>
						</li>
						<li>
							<a class="head-a" href="javascript:;">客户服务</a>
						</li>
						<li>
							<a class="head-a" href="javascript:;">大客户</a>
						</li>
					</ul>
				</div>
			</div>
			
				
			<!--logo，搜索内容显示位置-->
			<div id="head-content">
				<!--logo-->
				<div class="head-content-left">
					<img src="img/logo.png"/>
				</div>
				<!--搜索-->
				<div class="head-content-search">
					<p class="head-p"><i class="iconfont icon-sou icon-search f16"></i><input type="text" class="head-input" /><input type="button" class="head-btn" value="搜索" /></p>
					<div class="head-p2">
						<ul class="head-ul3 h">
							<li>
								<a class="head-a" href="javascript:;">红酒</a>
							</li>
							<li>
								<a class="head-a" href="javascript:;">葡萄酒</a>
							</li>
							<li>
								<a class="head-a" href="javascript:;">奔富</a>
							</li>
							<li>
								<a class="head-a" href="javascript:;">轩尼诗</a>
							</li>
							<li>
								<a class="head-a" href="javascript:;">拉菲</a>
							</li>
						</ul>
					</div>
				</div>
				<!--二维码-->
				<div class="head-content-right"><img src="img/erweima.jpg" /></div>
				<!--产品导航栏-->
				<nav>
					<div class="head-nav-left h f16">全部商品分类</div>
					<div class="head-nav-ul">
						<ul class="w">
							<li>
								<a href="index.html" class="head-a f16">首页</a>
							</li>
							<li>
								<a href="Global-.html" class="head-a f16">名庄甄选</a>
							</li>
							<li>
								<a href="flash-purchase.html" class="head-a f16">限时闪购</a>
							</li>
							<li>
								<a href="jiuzhuangjieshaofenye.html" class="head-a f16">美酒知识</a>
							</li>
							<li>
								<a href="wine.html" class="head-a f16">红洋美酒</a>
							</li>
						</ul>
					
					</div>
				</nav>
			</div>
			<div class="head-border w"></div>
		</div>
	
		</div>
		<div id="index-fenlei1">
			<div id="index-fenlei2">
				<div class="fenlei2-zuo">
					<ul id="liebiao">
						<li class="liebiao1">
							<i class="iconfont icon-shandian"></i>
							<a href="javascript:;">一键选购</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left: 60px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">法国</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">智利</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">波尔多</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">托斯卡纳</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">
									<p>
										<a href="javascript:;">奔富</a>
										<a href="javascript:;">甘露</a>
										<a href="javascript:;">拉菲</a>
										<a href="javascript:;">卡门萨</a>
										<a href="javascript:;">红魔鬼</a>
										<a href="javascript:;">泽巴赫</a>
									</p>
									<p>
										<a href="javascript:;">甜白</a>
										<a href="javascript:;">起泡</a>
										<a href="javascript:;">香槟</a>
										<a href="javascript:;">米酒</a>

									</p>
									<p>
										<a href="javascript:;">芝华士</a>
										<a href="javascript:;">轩尼诗</a>
										<a href="javascript:;">威士忌</a>
										<a href="javascript:;">白兰地</a>

									</p>
									<p>
										<a href="javascript:;">格鲁特</a>
										<a href="javascript:;">嘉士伯</a>
										<a href="javascript:;">德国啤酒</a>
										<a href="javascript:;">比利时啤酒</a>
									</p>

								</div>
							</div>
						</li>
						<li class="liebiao2">
							<i class="iconfont icon-hongjiu"></i>
							<a href="javascript:;">葡萄酒</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left:74px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">葡萄酒类型</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">品牌</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">产区</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">国家</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">葡萄品种</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">
									<p>
										<a href="javascript:;">红葡萄酒</a>
										<a href="javascript:;">白葡萄酒</a>
										<a href="javascript:;">桃红葡萄酒</a>
										<a href="javascript:;">起泡葡萄酒</a>
										<a href="javascript:;">加强葡萄酒</a>
										<a href="javascript:;">甜型葡萄酒</a>

									</p>
									<p>
										<a href="javascript:;">奔富酒圆</a>
										<a href="javascript:;">卡沃利</a>
										<a href="javascript:;">坎托雷</a>
										<a href="javascript:;">V骑士</a>
										<a href="javascript:;">泽巴赫酒庄</a>
										<a href="javascript:;">火玫瑰</a>
										<a href="javascript:;">石柱</a>
										<a href="javascript:;">鬼脸</a>
										<a href="javascript:;">卡乐丝</a>
									</p>
									<p>
										<a href="javascript:;">波尔多</a>
										<a href="javascript:;">香槟</a>
										<a href="javascript:;">罗纳河谷</a>
										<a href="javascript:;">皮诶蒙特</a>
										<a href="javascript:;">托斯卡纳</a>
										<a href="javascript:;">莫舍尔</a>
										<a href="javascript:;">莱茵黑森</a>

									</p>
									<p>
										<a href="javascript:;">法国</a>
										<a href="javascript:;">澳大利亚</a>
										<a href="javascript:;">意大利</a>
										<a href="javascript:;">德国</a>
										<a href="javascript:;">西班牙</a>
										<a href="javascript:;">美国</a>
										<a href="javascript:;">智利</a>
										<a href="javascript:;">阿根廷</a>
										<a href="javascript:;">加拿大</a>
									</p>
									<p>
										<a href="javascript:;">赤霞珠</a>
										<a href="javascript:;">美乐</a>
										<a href="javascript:;">西拉</a>
										<a href="javascript:;">佳美娜</a>
										<a href="javascript:;">仙粉黛</a>
										<a href="javascript:;">长相思</a>
										<a href="javascript:;">雷司令</a>

									</p>

								</div>
							</div>
						</li>
						<li class="liebiao3"><i class="iconfont icon-shangchengtubiaobaijiu"></i>
							<a href="javascript:;">白酒</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left: 88px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">品牌</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">香型</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">产地</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">
									<p>
										<a href="javascript:;">茅台</a>
										<a href="javascript:;">五粮液</a>
										<a href="javascript:;">洋河</a>
										<a href="javascript:;">剑南春</a>
										<a href="javascript:;">汾酒</a>
										<a href="javascript:;">古井贡</a>
										<a href="javascript:;">红星</a>
										<a href="javascript:;">泸州老窖</a>
										<a href="javascript:;">郎酒</a>
										<a href="javascript:;">牛栏山</a>

									</p>
									<p>
										<a href="javascript:;">酱香</a>
										<a href="javascript:;">浓香</a>
										<a href="javascript:;">清香</a>
									</p>
									<p>
										<a href="javascript:;">安徽</a>
										<a href="javascript:;">北京</a>
										<a href="javascript:;">贵州</a>
										<a href="javascript:;">山西</a>
										<a href="javascript:;">江苏</a>
										<a href="javascript:;">四川</a>

									</p>

								</div>
							</div>
						</li>
						<li class="liebiao4"><i class="iconfont icon-shangchengtubiaohuangjiu"></i>
							<a href="javascript:;">烈酒</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left: 88px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">种类</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">品牌</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">

									<p>
										<a href="javascript:;">威士忌</a>
										<a href="javascript:;">白兰地</a>
										<a href="javascript:;">伏特加</a>
										<a href="javascript:;">预调酒</a>
										<a href="javascript:;">朗姆酒</a>
										<a href="javascript:;">龙舌兰</a>
										<a href="javascript:;">金酒</a>
									</p>
									<p>
										<a href="javascript:;">芝华士</a>
										<a href="javascript:;"> 杰克丹尼</a>
										<a href="javascript:;">百龄坛</a>
										<a href="javascript:;">格兰</a>
										<a href="javascript:;">麦卡伦</a>
										<a href="javascript:;">轩尼诗</a>
										<a href="javascript:;">摩根船长</a>
										<a href="javascript:;">百加得</a>
										<a href="javascript:;">苏联红</a>
									</p>

								</div>
							</div>
						</li>
						<li class="liebiao5"><i class="iconfont icon-jiu"></i>
							<a href="javascript:;">啤酒</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left: 88px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">国家</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">种类</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">品牌</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">
									<p>
										<a href="javascript:;">德国</a>
										<a href="javascript:;">比利时</a>
										<a href="javascript:;">荷兰</a>
										<a href="javascript:;">美国</a>
										<a href="javascript:;">墨西哥</a>
										<a href="javascript:;">丹麦</a>

									</p>
									<p>
										<a href="javascript:;">黄啤酒</a>
										<a href="javascript:;">白啤酒</a>
										<a href="javascript:;">黑啤酒</a>

									</p>
									<p>
										<a href="javascript:;">智美</a>
										<a href="javascript:;">雪芙</a>
										<a href="javascript:;">百威</a>
										<a href="javascript:;">罗斯福</a>
										<a href="javascript:;">黑森马蹄</a>
										<a href="javascript:;"> 教士</a>
									</p>

								</div>
							</div>
						</li>
						<li class="liebiao6"><i class="iconfont icon-niunai"></i>
							<a href="javascript:;">食品饮料</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left: 60px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">饮品</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">国产食品</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

										<tr>
											<td align="right">品牌</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">
									<p>
										<a href="javascript:;">果蔬汁</a>
										<a href="javascript:;">饮用水</a>
										<a href="javascript:;">茶饮料</a>
										<a href="javascript:;">含乳饮料</a>

									</p>
									<p>
										<a href="javascript:;">零食</a>
										<a href="javascript:;">坚果</a>
									</p>
									<p>
										<a href="javascript:;">维他 </a>
										<a href="javascript:;">芭提娜</a>
										<a href="javascript:;">亚利桑那</a>
										<a href="javascript:;">汇源</a>
										<a href="javascript:;">莱家</a>

									</p>

								</div>
							</div>
						</li>
						<li class="liebiao7"><i class="iconfont icon-jiubei"></i>
							<a href="javascript:;">酒局周边</a>
							<i class="iconfont Hui-iconfont icon-xiaoyou" style="margin-left: 60px;">&#xe63d;</i>
							<div class="div1">
								<div class="biaoge-zuo">
									<table cellspacing="0" cellpadding="0" style="width: 120px;">
										<tr>
											<td align="right">种类</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>
										<tr>
											<td align="right">品牌</td>
											<td><i class="iconfont Hui-iconfont icon-xiaoyou">&#xe63d;</i></td>
										</tr>

									</table>
								</div>
								<div class="biaoge-you">
									<p>
										<a href="javascript:;">酒杯</a>
										<a href="javascript:;">醒酒器</a>
										<a href="javascript:;">酒刀</a>
										<a href="javascript:;">酒塞</a>
										<a href="javascript:;">酒柜</a>
										<a href="javascript:;">酒袋</a>
										<a href="javascript:;">酒壶</a>

									</p>
									<p>
										<a href="javascript:;">巴岛</a>
										<a href="javascript:;">巴卡拉</a>
										<a href="javascript:;">福新</a>
										<a href="javascript:;">新潮</a>

									</p>

								</div>
							</div>
						</li>

					</ul>
				</div>
				<div id="fenlei2-you">

				</div>
				<div class="fenlei2-you1">
					<div class="fenlei2-you1shang">
						<p>
							<a href="javascript:;">服务公告</a>
						</p>
						<ul>
							<li title="包邮直送，跨境购两会期间物流配送延迟通知">
								<a href="javascript:;">包邮直送，跨境购两会期间物流配送延迟通知</a>
							</li>
							<li title="翼支付，随机减满活动公告">
								<a href="javascript:;">翼支付，随机减满活动公告</a>
							</li>
							<li title="vin酒庄，食品安全在升级">
								<a href="javascript:;">vin酒庄，食品安全在升级</a>
							</li>

						</ul>
					</div>
					<div class="fenlei2-you1zhong">
						<ul>
							<li>
								<a href="JavaScript:;"><i class="iconfont icon-chongzhi"></i>充值</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-cz"></i>买宝</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-jifenshangcheng"></i>积分</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-vip1" style="font-size: 12px;"></i>VIP</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-icon-test7"></i>团购</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-redian"></i>热点</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-qian-copy" style="font-size: 12px;"></i>礼卡</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-jingxuan"></i>尊享</a>
							</li>
							<li>
								<a href="javascript:;"><i class="iconfont icon-dituzhaofang"></i>客户</a>
							</li>
						</ul>
					</div>
					<div class="fenlei2-you1xia">
						<a href="javascript:;"><img src="img/606187_0_pic270_7833.jpg" /></a>
					</div>

				</div>
				<!--左右箭头-->
				<span id="zuojiantou"><i class="iconfont icon-back zuojiantou"></i></span>
				<span id="youjiantou"><i class="iconfont icon-more youjiantou"></i></span>
				<!--轮播图下边的圆圈-->
				<ul id="index-lunbo">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>
		<div class="index-jinbao" style="background: white;">
			<div>1F</div>
			<span>葡萄酒</span>
		</div>
		<div class="index-jinbaopin" style="background: white;">
			<div class="index-jinbaopin1">
				<a href=""><img src="img/big.png" /></a>
			</div>
			<div>
				<p class="index-jinbaopinshang">
					<a href=""><img src="" /></a>
				</p>

				<ul class="index-jinbaopinxia">
					<li class="title1">
						<a href=""></a>
					</li>
					<li></li>
					<li class="danjia"><span class="danjia-haizi"></span><span class="qukankan"><a href="">去看看</a></span></li>
				</ul>

			</div>
			<div>
				<p class="index-jinbaopinshang">
					<a href=""><img src="" /></a>
				</p>
				<ul class="index-jinbaopinxia">
					<li title="" class="title1">
						<a href=""></a>
					</li>
					<li></li>
					<li class="danjia"><span class="danjia-haizi"></span><span class="qukankan"><a href="">去看看</a></span></li>
				</ul>
			</div>
			<div>
				<p class="index-jinbaopinshang">
					<a href=""><img src="" /></a>
				</p>
				<ul class="index-jinbaopinxia">
					<li title="" class="title1">
						<a href=""></a>
					</li>
					<li></li>
					<li class="danjia"><span class="danjia-haizi"></span><span class="qukankan"><a href="">去看看</a></span></li>
				</ul>
			</div>
			<div>
				<p class="index-jinbaopinshang">
					<a href=""><img src="" /></a>
				</p>
				<ul class="index-jinbaopinxia">
					<li class="title1">
						<a href=""></a>
					</li>
					<li></li>
					<li class="danjia"><span class="danjia-haizi"></span><span class="qukankan"><a href="">去看看</a></span></li>
				</ul>
			</div>
		</div>
		<div class="index-tuijian" style="background: white;">
			<div>2F</div>
			<span>白酒</span>
		</div>
		<div class="index-tuijianchanpin" style="background: white;">
			<div style="width: 482px;" class="tuijianchanpinfirst">
				<a href=""><img src="img/winejiu.png" style="width: 430px; height:300px ; margin: 10px 0px 0px 20px;" /></a>
			</div>
			<div class="tuijianchanpin-second">
				<a href=""><img src="" /></a>
				<span class="jiarugouwuche">
					加入购物车
					<i style="margin-left: 60px;" class="iconfont icon-shouye-gouwuche"></i>
				</span>
			</div>
			<div class="tuijianchanpin-second">
				<a href=""><img src="" /></a>
				<span class="jiarugouwuche">
					加入购物车
					<i style="margin-left: 60px;" class="iconfont icon-shouye-gouwuche"></i>
				</span>
			</div>
			<div class="tuijianchanpin-second">
				<a href=""><img src="" /></a>
				<span class="jiarugouwuche">
					加入购物车
					<i style="margin-left: 60px;" class="iconfont icon-shouye-gouwuche"></i>
				</span>
			</div>
		</div>
		<!--以下为进口食品      1楼-->
		<div class="index-jinkou" style="background: white;">
			<div id="floor1">3F</div>
			<span style="float: left;">烈酒</span>
		</div>
		<div class="jinkoushipin" style="background: white;">
			<div class="jinkoushipin-zuo">
				<a href=""><img src="img/1487663590851662.png" /></a>
			</div>
			<div class="jinkoushipin-you">
				<ul>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="jinkoushipinimg">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="jinbaopinmiaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>

				</ul>
			</div>
		</div>
		<!--以下为生鲜 日配-->
		<div class="index-jinkou" style="background: white;">
			<div id="floor2">4F</div>
			<span style="float: left;">啤酒</span>
		</div>
		<div class="jinkoushipin" style="background: white;">
			<div class="jinkoushipin-zuo">
				<a href="javascript:;"><img src="img/1482906847140900.png" /></a>

			</div>
			<div class="jinkoushipin-you">
				<ul>
					<li>
						<p class="shengxianripei">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="shengxianripei">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="shengxianripei-miaoshu"><a href="javascript:;"></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>

				</ul>
			</div>
		</div>
		<!--以下为休闲保健-->
		<div class="index-jinkou" style="background: white;">
			<div id="floor3">5F</div>
			<span style="float: left;">朗姆酒</span>
		</div>
		<div class="jinkoushipin" style="background: white;">
			<div class="jinkoushipin-zuo">
				<a href="javascript:;"><img src="img/1487663796918427(1).png" /></a>

			</div>
			<div class="jinkoushipin-you">
				<ul>
					<li>
						<p class="xiuxianbaojian">
							<a href=""><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>
					<li>
						<p class="xiuxianbaojian">
							<a href="javascript:;"><img src="" /></a>
						</p>
						<p><span class="xiuxianbaojian-miaoshu"><a href=""></a></span><br />
							<span class="jinkoushipinjiage"></span></p>
					</li>

				</ul>
			</div>
		</div>
		<!--以下为底部-->
		<div id="footer">
			<!--多快好省-->
			<div class="footer-dkhs">
				<div class="footer-dkhs-img"><img src="img/service_items_1.png"/></div>
				<div class="footer-dkhs-img"><img src="img/service_items_2.png"/></div>
				<div class="footer-dkhs-img"><img src="img/service_items_3.png"/></div>
				<div class="footer-dkhs-img"><img src="img/service_items_4.png"/></div>
			</div>
			<!--友情链接显示-->
			<div id="footer-top">
				<div class="fl footrer-top-content">
					<h5 class="footer-h5 mb5"><a href="javascript:;">新手上路</a></h5>
					<ul>
						<li>
							<a href="javascript:;">新用户演示</a>
						</li>
						<li>
							<a href="javascript:;">会员积分计划</a>
						</li>
						<li>
							<a href="javascript:;">会员等级规则</a>
						</li>
						<li>
							<a href="javascript:;">售后服务政策</a>
						</li>
						<li>
							<a href="javascript:;">发票制度</a>
						</li>
					</ul>
				</div>
				<div class="fl footrer-top-content">
					<h5 class="footer-h5 mb5"><a href="javascript:;">付款方式</a></h5>
					<ul>
						<li>
							<a href="javascript:;">支付方式</a>
						</li>
						<li>
							<a href="javascript:;">支付常见问题</a>
						</li>
						<li>
							<a href="javascript:;">激活礼品卡</a>
						</li>
						<li>
							<a href="javascript:;">我买卡</a>
						</li>
						<li>
							<a href="javascript:;">电子礼品卡说明</a>
						</li>
					</ul>
				</div>
				<div class="fl footrer-top-content">
					<h5 class="footer-h5 mb5"><a href="javascript:;">配送信息</a></h5>
					<ul>
						<li>
							<a href="javascript:;">配送运费信息</a>
						</li>
						<li>
							<a href="javascript:;">生鲜速配运费标准</a>
						</li>
						<li>
							<a href="javascript:;">订单处理时间</a>
						</li>
						<li>
							<a href="javascript:;">验货与拒收政策</a>
						</li>
						<li>
							<a href="javascript:;">用券订单结算说明</a>
						</li>
					</ul>
				</div>
				<div class="fl footrer-top-content">
					<h5 class="footer-h5 mb5"><a href="javascript:;">温馨提示</a></h5>
					<ul>
						<li>
							<a href="javascript:;">找回密码</a>
						</li>
						<li>
							<a href="javascript:;">联系我们</a>
						</li>
						<li>
							<a href="javascript:;">常见问题热点</a>
						</li>
						<li>
							<a href="javascript:;">顾客意见</a>
						</li>
						<li>
							<a href="javascript:;">关于跨境购</a>
						</li>
					</ul>
				</div>
			</div>
			<!--尾部-->
			<div id="footer-bottom">
				<p class="footer-p">
					<span><a href="javascript:;">关于我们</a></span>
					<span>|</span>
					<span><a href="javascript:;">免费条款</a></span>
					<span>|</span>
					<span><a href="javascript:;">中粮集团</a></span>
					<span>|</span>
					<span><a href="javascript:;">友情链接</a></span>
					<span>|</span>
					<span><a href="javascript:;">搜索热词</a></span>
					<span>|</span>
					<span><a href="javascript:;">实物购物券</a></span>
					<span>|</span>
					<a href="javascript:;">客服电话：400-005-5678</a>
				</p>
				<p>
					<span><a href="javascript:;"><img src="img/beian.png"/>京公网安备 11010102000458号</a></span>
					<span>|</span>
					<span>京ICP备 13003995号</span>
					<span>|</span>
					<span>营业执照（统一社会信用代码）91110000055590239L</span>
					<span>|</span>
					<span>食品经营许可证：JY11105020028185</span>
					<span>|</span>
					<span>Copyright&copy;2009-2017 vin酒庄上购物 版权所有</span>
				</p>
			</div>
		</div>
		<!--以下为滚动条到一定程度时出现搜索框-->
		<div id="index-sousuo">
			<div class="index-sousuo-loga"></div>
			<p class="head-p"><i class="glyphicon glyphicon-search icon-search f16"></i><input type="text" class="head-input" placeholder="春季吃的都在这里啦" /><input type="button" class="head-btn" value="搜索" /></p>
		</div>
		<!--以下为楼层的设置-->
		<div id="index-louxeng">
			<div class="louceng1">
				<a href="#floor1">1F 进口食品</a>
			</div>
			<div class="louceng1">
				<a href="#floor2">2F 生鲜日配</a>
			</div>
			<div class="louceng1">
				<a href="#floor3">3F 休闲保健</a>
			</div>
			<div class="louceng1" id="goTotop" style="line-height: 50px;">顶部</div>
		</div>
		<!--//以下为右侧粉色版的购物车-->
		<div id="index-youdaohang">
			<div class="youdaohang-zuo">
				<div class="youdaohang-zuo-shang">
					<ul>
						<li class="youdaohang-gouwu">
							<a href="javascript:;"><i id="gouwu-gouwuche" class="Hui-iconfont">&#xe6b9;</i></a>
							<div class="youdaohang-xuanfu">
								<a href="javascript:;">我的购物车</a>
							</div>
						</li>
						<li class="youdaohang-gouwu">
							<a href="javascript:;"><i class="Hui-iconfont">&#xe6b6;</i></a>
							<div class="youdaohang-xuanfu">
								<a href="javascript:;">我的优惠券</a>
							</div>
						</li>
						<li class="youdaohang-gouwu">
							<a href="javascript:;"><i class="Hui-iconfont">&#xe702;</i></a>
							<div class="youdaohang-xuanfu">
								<a href="javascript:;">我的收藏</a>
							</div>
						</li>
						<li class="youdaohang-gouwu">
							<a href="javascript:;"><i class="Hui-iconfont">&#xe725;</i></a>
							<div class="youdaohang-xuanfu">
								<a href="javascript:;">我的足记</a>
							</div>
						</li>
						<li class="youdaohang-gouwu">
							<a href="javascript:;"><i class="Hui-iconfont">&#xe6d0;</i></a>
							<div class="youdaohang-xuanfu">
								<a href="javascript:;">我要咨询</a>
							</div>
						</li>
						<li class="youdaohang-gouwu">
							<a href="javascript:;"><i class="Hui-iconfont">&#xe6aa;</i></a>
							<div class="youdaohang-xuanfu">
								<a href="javascript:;">我要分享</a>
							</div>
						</li>

					</ul>
				</div>
				<div class="youdaohang-zuo-xia">
					<ul>
						<li title="手机app" class="zuoxia-xuanfu">
							<a href="javascript:;" class="icon Hui-iconfont icon-xin">&#xe696;</a>
							<div class="erweima">
								<div class="xiazai">
									扫描下载app
								</div>
								<div class="youhui">
									<img src="img/erweima1122.jpg" />
								</div>
							</div>
						</li>
						<li title="回到顶部" class="zuoxia-xuanfu">
							<a href="javascript:;" class="icon Hui-iconfont">&#xe6d6;</a>
							<div class="huidingbu">
								回到顶部
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="youdaohang-you">
				<p><span>我的购物车</span><span id="guanbi" class="iconfont icon-guanbi"></span></p>
				<p>主人的购物车空空如也，心好塞，快去挑选心仪的商品吧 ! ! !</p>
				<p>
					<a href="javascript:;">去首页看看</a>
				</p>
			</div>
		</div>
		<!--//拿到leancloud的js-->
		<script src="js/av-min-2.1.2.js" type="text/javascript"></script>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script src="js/compound.js" type="text/javascript"></script>
		<script type="text/javascript">
			//先进行初始化函数
			window.onload = function() {
				var APP_ID = 'isetgclNbinuVRR2cWjIAsc2-gzGzoHsz';
				var APP_KEY = 'iB12WgD1FTr8FGQNB0JSsrah';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
				var currentUser = AV.User.current();
				if(currentUser) {
					console.log(currentUser._serverData.username);
				} else {
				}
				//查询商品
				var query = new AV.Query('Product');
				//查询id小与等于1137的产品
				//query.descending('createdAt');
//				query.startsWith('username', currentUser._serverData.username);
				//query.lessThanOrEqualTo('priority',1137);
				//按时间降序排序
				//query.descending('createdAt');
				//按优先级排序
				//query.addAscending('priority');
				//按id排序
				query.ascending('id');
				query.limit(37); //获取1条数据
				query.find().then(function(products) {
//					console.log(products);
					//从这里开始获取产品
					//split用于把一个字符串分割成一个个字符串数组
//					console.log(products[0].attributes.title);
					for(var i = 0; i < products.length; i++) {
						//以下为1楼的产品图片
						$(".index-jinbaopinshang a>img").each(function(i) {
							$(this).attr("src", products[i].attributes.image.split(";")[0]);
							$(this).parents().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");
							$(this).attr("title", products[i].attributes.title);
							$(this).parents().parents().next('.index-jinbaopinxia').find('.title1').children().html(products[i].attributes.title);
							$(this).parents().parents().next('.index-jinbaopinxia').find('.title1').attr("title", products[i].attributes.title);
							$(this).parents().parents().next('.index-jinbaopinxia').find('.title1').children().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");
							$(this).parents().parents().next('.index-jinbaopinxia').find('.danjia').find('.danjia-haizi').html(products[i].attributes.price);
							$(this).parents().parents().next('.index-jinbaopinxia').find('.danjia').find('.qukankan').children().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");

						});
						//以下为2楼的产品图片
						$(".tuijianchanpin-second a>img").each(function(i) {
							$(this).attr("src", products[i + 4].attributes.image.split(";")[0]);
							$(this).parents().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");
							$(this).attr("title", products[i + 4].attributes.title);
						});
						//以下为3楼的产品图片
						$(".jinkoushipinimg a>img").each(function(i) {
							$(this).attr("src", products[i + 7].attributes.image.split(";")[0]);
							$(this).attr("title", products[i + 7].attributes.title);
							$(this).parents().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");
							$(this).parents().parents().next().find('.jinbaopinmiaoshu').children().html(products[i + 7].attributes.title);
							$(this).parents().parents().next().find('.jinbaopinmiaoshu').attr("title", products[i + 7].attributes.title);
							$(this).parents().parents().next().find('.jinbaopinmiaoshu').children().attr("href", "xiangqing.html?id="+products[i+7].attributes.id+"");
							$(this).parents().parents().next().find('.jinkoushipinjiage').html(products[i + 7].attributes.price);
						});
						//以下为4楼的产品图片
						$(".shengxianripei a>img").each(function(i) {
							$(this).attr("src", products[i + 15].attributes.image.split(";")[0]);
							$(this).parents().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");
							$(this).parents().parents().next().find('.shengxianripei-miaoshu').children().html(products[i + 15].attributes.title);
							$(this).parents().parents().next().find('.shengxianripei-miaoshu').children().attr("href", "xiangqing.html?id="+products[i+15].attributes.id+"");
							$(this).parents().parents().next().find('.jinkoushipinjiage').html(products[i + 15].attributes.price);
							$(this).attr("title", products[i + 15].attributes.title);
							$(this).parents().parents().next().find('.shengxianripei-miaoshu').attr("title", products[i + 15].attributes.title);

						});
						//以下为5楼的产品价格
						$(".xiuxianbaojian a>img").each(function(i) {
							$(this).attr("src", products[i + 23].attributes.image.split(";")[0]);
							$(this).parents().attr("href", "xiangqing.html?id="+products[i].attributes.id+"");
							$(this).parents().parents().next().find('.xiuxianbaojian-miaoshu').children().html(products[i + 23].attributes.title);
							$(this).parents().parents().next().find('.xiuxianbaojian-miaoshu').children().attr("href", "xiangqing.html?id="+products[i+23].attributes.id+"");
							$(this).parents().parents().next().find('.jinkoushipinjiage').html(products[i + 23].attributes.price);
							$(this).attr("title", products[i + 23].attributes.title);
							$(this).parents().parents().next().find('.xiuxianbaojian-miaoshu').attr("title", products[i + 23].attributes.title);
						});
					}
				});
			}
		</script>
		<script type="text/javascript">
			//以下是全部商品分类悬浮的效果图
			//文本加载完成后   两种写法
			$(function() {
				//将图片放到一个数组里，可以后台获取
				//以下为列表悬浮时的效果
				var lis = $("#liebiao").children();
				for(var i = 0; i < lis.length; i++) {
					(function(a) {
						lis[i].onmouseover = function() {
							$(this).css({
								"background-color": "#666"
							});
							$(this).find(".div1").show();
						};
						lis[i].onmouseout = function() {
							$(this).css("background-color", "#322A1F");
							$(this).find(".div1").hide();
						};
					})(i);
				}
				//点击左右箭头切换图片
				var a = 1;
				$("#zuojiantou").click(function() {
					a--;
					if(a == 0) {
						a = 5;
					};

					$("#index-fenlei1").css("background-image", "url(img/lubo" + a + ".jpg)");
				});
				$("#youjiantou").click(function() {
					a++;
					if(a == 5) {
						a = 1;
					}
					$("#index-fenlei1").css("background-image", "url(img/lubo" + a + ".jpg)");
				});
				//每隔两秒换一次图片轮播
				$("#index-lunbo li").eq(0).css("background-color", "white");
				var b;
				var lunbo = setInterval(function() {
					a++;
					b = a - 1;
					if(a > 5) {
						a = 1;
						b = a - 1;
					};
					$("#index-fenlei1").css("background-image", "url(img/lubo" + a + ".jpg)");

					$("#index-lunbo li").css("background-color", "black").css("color", "white");
					var lunbos = $("#index-lunbo").children();
					lunbos[b].style.backgroundColor = "white";
					lunbos[b].style.color = "black";
				}, 2000);
				//图片下边的圆圈的背景切换
				var lunbos = $("#index-lunbo").children();
				for(var j = 0; j < lunbos.length; j++) {
					lunbos[j].index = j;
					lunbos[j].style.backgroundColor = "black";
					lunbos[j].onmouseover = function() {
						//clearInterval(lunbo);
						this.style.backgroundColor = "white";
						this.style.color = "black";
						console.log(lunbos[this.index].innerHTML);
						$("#index-fenlei1").css("background-image", "url(img/lubo" + (lunbos[this.index].innerHTML) + ".jpg)");
					};
					lunbos[j].onmouseout = function() {
						this.style.backgroundColor = "black";
						this.style.color = "white";
					};
				};
				//以下是点击购物车的显示与隐藏
				$("#gouwu-gouwuche").click(function() {
					$(".youdaohang-you").slideToggle();
				});
				//购物车的关闭按钮
				$("#guanbi").click(function() {
					$(".youdaohang-you").slideUp();
				});
				//以下为搜索框在页面下拉到一定距离时出现
				$(window).scroll(function() {
					if($(document).scrollTop() > 700) {
						$("#index-sousuo").slideDown();
					} else {
						$("#index-sousuo").slideUp();
					}
				});
				//以下为购物车的左边的悬浮显示与隐藏
				$(".youdaohang-gouwu").on("mouseover", function() {
					$(this).find(".youdaohang-xuanfu").show();
				}).on("mouseout", function() {
					$(this).find(".youdaohang-xuanfu").hide();
				});
				$(".zuoxia-xuanfu").on("mouseover", function() {
					$(this).find("div").show();
				}).on("mouseout", function() {
					$(this).find("div").hide();
				});
				$(".tuijianchanpin-second").on("mouseover", function() {
					$(this).find(".jiarugouwuche").show();
					$(this).find($(".jiarugouwuche")).css("cursor", "pointer");
				}).on("mouseout", function() {
					$(this).find(".jiarugouwuche").hide();
				});
				//回到页面顶部  
				$("#goTotop").click(function() {
					$('body,html').animate({
						scrollTop: 0
					}, 1500);
				});
				$(".huidingbu").click(function() {
					$('body,html').animate({
						scrollTop: 0
					}, 1500);
				});

			});
		</script>
	</body>

</html>